<div class="row">
    <div class="card card-stats">
        <div class="card-header card-header-successtwo card-header-icon">
            <div class="card-icon" style="background: #FF4081 100%;">
                <img src="../image/money.svg" style="width: 3rem;height: 3rem;padding: 0.5rem">
            </div>
            <p class="card-category" style="margin-right: 0.5rem;">Total commission</p>
            <h3 class="card-title" style="margin-right: 0.5rem;">
                <span id="total"></span>
                <small>KSH</small>
            </h3>
        </div>
        <div class="card-footer">
            <div class="stats" align="center">
                <div>
                    <img src="../image/flag_icon.svg" style="width: 1.5rem;height: 1.5rem;padding: 0.3rem">
                    <a href="/bocai-sale/s/desk.do" style="color:#FF4081;">
                        <span>Extended users:</span>
                        <span id="userCount"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="card card-stats">
        <div class="card-header card-header-successtwo card-header-icon">
            <div class="card-icon" style="background: #FF4081 100%;">
                <img src="../image/money.svg" style="width: 3rem;height: 3rem;padding: 0.5rem">
            </div>
            <p class="card-category" style="margin-right: 0.5rem;">Withdrawal commission</p>
            <h3 class="card-title" style="margin-right: 0.5rem;">
                <span id="withdraw"></span>
                <small>KSH</small>
            </h3>
        </div>
        <div class="card-footer">
            <div class="stats" align="center">
                <div>
                    <img src="../image/flag_icon.svg" style="width: 1.5rem;height: 1.5rem;padding: 0.3rem">
                    <a href="/bocai-sale/s/withdraw-detail.do" style="color:#FF4081;">Withdrawals record</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="card card-stats">
        <div class="card-header card-header-successtwo card-header-icon">
            <div class="card-icon" style="background: #FF4081 100%;">
                <img src="../image/money.svg" style="width: 3rem;height: 3rem;padding: 0.5rem">
            </div>
            <p class="card-category" style="margin-right: 0.5rem;">Pendding commissions</p>
            <h3 class="card-title" style="margin-right: 0.5rem;">
                <span id="pendding"></span>
                <small>KSH</small>
            </h3>
        </div>
        <div class="card-footer">
            <div class="stats" align="center">
                <div>
                    <div src="" style="width: 2rem;height: 2rem;padding: 0.3rem"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <button type="button" data-toggle="modal" , data-target="#invitation" , class="btn btn-info"
                style="width: 100%;height: 3rem;padding: 0px;">Invitation Code
        </button>
    </div>
    <div class="col-md-6">
        <button type="button" data-toggle="modal" , data-target="#loginModal" , class="btn btn-info"
                style="width: 100%;height: 3rem;">Withdraw
        </button>
    </div>
</div>


<%--提现弹框--%>
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Withdrawal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form" method="" action="">
                    <div class="form-group">
                        <label>Withdrawal to account</label>
                        <input type="text" class="form-control" disabled id="withdrawal_account">
                    </div>
                    <div class="form-group">
                        <label>Withdrawal Amount</label>
                        <input type="text" class="form-control" placeholder="input..." id="withdrawal_amout">
                    </div>
                </form>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" onclick="confirmWithdraw()" class="btn btn-info">Confirm</button>
            </div>
        </div>
    </div>
</div>
<%--提现弹框结束--%>

<%--二维码弹窗--%>
<div class="modal fade" id="invitation" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">&nbsp;</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <%--//图片--%>
                            <div id="qrcode" style="width: 256px;height: 256px;">
                            </div>
                            <img src="" id="image" style="align-content: center;margin-left: 90px;" align="center">
                    </div>
                    <div class="row">
                        <%--//链接--%>
                        <span type="text" id="url_link" style="margin: 20px 0px;width: 100%;text-align: center;"></span>

                    </div>
                    <div class="row justify-content-center">
                        <%--按钮--%>

                        <div class="co-md-3">
                            <button id="copy_btn" onclick="copyImage()" type="button" data-clipboard-target="#url_link" class="btn btn-info btn-xl">copy</button>
                        </div>
                        <div class="co-md-3">
                            <a id="downloadLink"></a>
                            <button type="button" onclick="downloadImage()" class="btn btn-info btn-xl">download</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>

<%--二维码弹框结束--%>
<script>

    new ClipboardJS('#copy_btn', {

        container: document.getElementById('url_link'),

    });

    var salesPhone = "<%=session.getAttribute("salesPhone")%>";
    $('#withdrawal_account').val(salesPhone);

    getDetail();

    /**
     * 获取金额总览
     */
    function getDetail() {
        var salesId = "<%=session.getAttribute("salesId")%>";
        $.ajax({
            url: baseUrl.base + 'sales/moneyPriview',
            type: 'post',
            data: {'saleId': salesId},
            success: function (data) {

                if (data.code == 0) {

                    var userCount = data.results.userCount;
                    var salesMoney = data.results.salesMoney;//待提现
                    var backMoney = data.results.backMoney;//总佣金
                    var outMoney = data.results.outMoney;//已提现

                    $('#userCount').html(userCount);
                    $('#total').html(backMoney);
                    $('#withdraw').html(outMoney);
                    $('#pendding').html(salesMoney);

                }
            }
        })
    }

    /**
     * 提现申请
     */
    function confirmWithdraw() {
        var amout = $('#withdrawal_amout').val();
        if (amout == null || amout == 0) {
            showNotification('bottom', 'right', 'Please input amout');
            return;
        }

        var salesId = "<%=session.getAttribute("salesId")%>";
        $.ajax({
            url: baseUrl.base + 'sales/saveDistributorCashInfo',
            type: 'post',
            data: {'distributorId': salesId, 'money': amout, 'payString': 'M-Pesa'},
            success: function (data) {

                if (data.code == 0) {
                    $("#loginModal").modal('hide');
                    getDetail();
                }

                showNotification('bottom', 'right', data.msg);

            }
        })
    }

    invitationCode();

    function invitationCode() {
        var salesId = "<%=session.getAttribute("salesId")%>";

        $('#qrcode').empty();
        var url = window.location.host + '/bocai-web/views/index.html?salesId='+salesId;
        $("#url_link").text(url);
        var test = $('#qrcode').qrcode(url).hide();
        var canvas = test.find('canvas').get(0);
        $('#image').attr("src", canvas.toDataURL('image/jpg'));
    }

    /*复制链接*/
    function copyImage() {
        showNotification('bottom', 'right', 'copy success');
    }

    /**
     * 下载图片
     */
    function downloadImage() {
        // 获取base64的图片节点
        var img = document.getElementById("image");
//         构建画布
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        canvas.getContext('2d').drawImage(img, 0, 0);
        // 构造url
        var url = canvas.toDataURL('image/png');
        // 构造a标签并模拟点击
        var downloadLink = $('#downloadLink').attr("href", url).attr("download", "code.png");
        downloadLink[0].click();
    }

</script>